<template>
  <dl 
    :class="$style.container" 
    @mouseleave="id=null">
    <dt>{{ title }}</dt>
    <dd 
      v-for="(item, idx) in lists" 
      :key="item.doubanId + title+idx" 
      @click.stop="handleItemClick(item)"
    >
      <div style="position:relative;">
        <img 
          :src="item.poster" 
          @mouseover.stop="mouseover(idx)">
        <span :class="$style.rate">{{ item.rate }}</span>
      </div>
      <div :class="$style.top">
        <h4>{{ item.original_title }}</h4>
        <el-button 
          v-if="item.price && !item.isMyFilm" 
          size="mini">购买</el-button>
        <el-button 
          v-else-if="item.price && item.isMyFilm" 
          size="mini">已购买</el-button>
        <p 
          v-else 
          :class="$style.free">免费</p>
      </div>
      <p :class="$style.desc">{{ item.wish_count }}人想看</p>
      <div 
        :class="idx === id ? [$style.hover,$style.active] : $style.hover"
      >
        <div :class="$style.top1"/>
        <h4>{{ item.original_title }} <span>{{ item.rate }}</span></h4>
        <p :class="$style.sum">简介:{{ item.summary }}</p>
      </div>
    </dd>
  </dl>
</template>

<script>
import http from '../../APIService/http'
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: null
    }
  },
  methods: {
    mouseover(idx) {
      this.id = idx
    },
    handleItemClick(item) {
      if (item.price && !item.isMyFilm) {
        this.handleBuyClick(item)
      } else {
        this.$router.push({
          path: '/detail',
          query: { id: item.doubanId }
        })
      }
    },
    /**
     * 立即购买
     */
    async handleBuyClick(item) {
      try {
        let token = this.$cookiz.get(this.$api.token)
        if (!token) {
          this.$store.commit('SET_SHOW', true)
          return false
        }
        let params = {
          id: item.doubanId
        }
        let res = await http.post(`/cart/addCart?token=${token}`, params)
        if (res.code === 0) {
          this.$router.push({
            path: '/cart'
          })
        }
      } catch (err) {
        throw err
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
  position: relative;
  &:after {
    display: block;
    content: ' ';
    overflow: hidden;
    clear: both;
  }
  dt {
    margin: 10px 0px;
    font-size: 28px;
    line-height: 40px;
    font-weight: 500;
    color: #202020;
  }
  dd {
    position: relative;
    float: left;
    margin: 0px 4px;
    width: calc((100% - 60px) / 7);
    &:first-child {
      margin-left: 0px;
    }
    &:last-child {
      margin-right: 0px;
    }
    &:hover {
      display: block;
    }
    img {
      width: 100%;
      height: 234px;
      object-fit: cover;
    }
    .rate {
      position: absolute;
      right: 4px;
      bottom: 4px;
      width: 35px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      color: #e36049;
      background-color: rgba(17, 17, 17, 0.8);
      display: inline-block;
    }
    .top {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      h4 {
        font-size: 14px;
        color: #202020;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      button {
        background: #f20d0d;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        &:hover,
        &focus {
          color: #fff;
          border-color: #f20d0d;
          background-color: #f20d0d;
        }
      }
      .free {
        color: #be9e4d;
        font-size: 12px;
      }
    }
    .desc {
      margin-top: 5px;
      font-size: 13px;
      color: #999;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .hover {
      display: none;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 276px;
      transform: scale(1.4, 1.1);
      background: #fff;
      z-index: 10;
      overflow: hidden;
      border-radius: 5px;
      padding-bottom: 10px;
      .top1 {
        width: 100%;
        height: 140px;
        background: #000;
      }
      h4 {
        margin: 10px 5px;
        span {
          margin-left: 10px;
          font-size: 12px;
          color: #666;
        }
      }

      .sum {
        margin: 5px 5px 0px 5px;
        font-size: 12px;
        color: #999;
        line-height: 16px;
        height: 80px;
        overflow: hidden;
        position: relative;
        &:after {
          content: '...';
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
    }
    .active {
      display: block;
    }
  }
}
</style>
